<!--
 * @author: 十一
 * @since: 2025-09-08
 * index.vue
 * @desc: new page
-->
<template>
  <div class="p-4">
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="onFlowCreate"> 创建审批</a-button>
      </template>
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'">
          <a>{{ text }}</a>
        </template>
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup>
  import { BasicColumn, BasicTable, TableAction,FormSchema } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { useRouter } from 'vue-router';
  //定义表格列
  const columns: BasicColumn[] = [
    {
      title: '流程名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '版本号',
      dataIndex: 'version',
      key: 'version',
    },
    {
      title: '可见范围',
      dataIndex: 'visibleRange',
      key: 'visibleRange',
    },
  ];
  //表单搜索字段
  const searchFormSchema: FormSchema[] = [
    {
      label: '流程名称', //显示label
      field: 'title', //查询字段
      component: 'JInput', //渲染的组件
      defaultValue: '', //设置默认值
    },
  ];
  // 列表页面公共参数、方法
  const { tableContext } = useListPage({
    designScope: 'basic-table-demo',
    tableProps: {
      title: '可选择表格',
      dataSource: [
        {
          title: '流程1',
          version: '1.0.0',
          visibleRange: '部门A',
        },
        {
          title: '流程2',
          version: '1.0.0',
          visibleRange: '部门B',
        },
      ],
      columns: columns,
      rowkey: 'id',
      //定义rowSelection的类型，默认是checkbox多选，可以设置成radio单选
      rowSelection: { type: 'checkbox' },
       formConfig: {
        schemas: searchFormSchema,
      }
    },
  });

  /**BasicTable绑定注册 ，返回reload 刷新方法、rowSelection行选择属性、
selectedRows选中的行信息、selectedRowKeys 选中的行rowkey */
  const [registerTable, { reload }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;

  /**
   * 操作栏设置，可配置编辑、删除等各种操作方式，其他使用方式参考文档中的 `内置组件`内容
   */
  function getTableAction(record): ActionItem[] {
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
      },
        {
        label: '删除',
        onClick: handleEdit.bind(null, record),
      },
    ];
  }

  function handleEdit(record) {
    console.log(record);
    console.log(selectedRows.value);
    console.log(selectedRowKeys.value);
  }
  const router = useRouter();
  const onFlowCreate = () => {
    router.push('/system/flow/settingFlow');
  };
</script>

<style lang="less" scoped></style>
